<!--  -->
<template>
  <span class="txt hy-65J" ref="txt">{{ text }}</span>
</template>

<script>
import { merge } from 'lodash-es'
/**
 * 文字组件 zhu18@vip.qq.com at 2020.10.08
 * @default
 *  params:{
 *      text:'',
 *      animateDuration:.5,
 *      animateType:'print',
 *      animateOpt:{
 *        //print，scramble: 使用scrambleText 设置项 https://www.tweenmax.com.cn/ScrambleTextPlugin/
 *        //wave,waveSmall: 使用SplitText 设置项https://www.tweenmax.com.cn/SplitText/
 *           ...
 *       }
 *  }
 * @example
 *      <txt value="啥色的花" }" />
 *      <txt class="txt" value="啥色的花" :params="{animateDuration:.5,animateType:'wave'}"  ref="txt" />
 *      <txt :params="{text:'啥色的花', animateType:'scramble',animateOpt:{ chars:'upperAndLowerCase', newClass:'class2', oldClass:'class1'} }" />
 */
export default {
  name: 'txt',
  props: ['params', 'value'],
  components: {},
  data() {
    return {
      //----base-------
      text: '',
      //----animate-----
      animateDuration: 0.5,
      //[print:打印效果 | scramble:字符转换过渡 |  wave:字符波浪 | waveSmall: 小字符波浪]
      animateType: 'print',
      //print，scramble: 使用scrambleText 设置项 https://www.tweenmax.com.cn/ScrambleTextPlugin/
      //wave,waveSmall: 使用SplitText 设置项https://www.tweenmax.com.cn/SplitText/
      animateOpt: null
    }
  },
  filters: {},
  watch: {},
  created() {
    this.text = this.value
    merge(this, this.params)
  },
  mounted() {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.addLabel('start')
      tl.add(this.getAnimate(), 'start+=0')
      return tl
    },
    getAnimate() {
      //动画类型
      switch (this.animateType) {
        case 'print':
          return this.animate_Print()
        case 'scramble':
          return this.animate_Scramble()
        case 'wave':
          return this.animate_Wave()
        case 'waveSmall':
          return this.animate_WaveSmall()
        default:
          return this.animate_Print()
      }
    },
    //print
    animate_Print() {
      let _opt = {
        text: this.text,
        chars: '_',
        speed: 0.3,
        ease: Linear.easeNone
      }
      return TweenMax.to(this.$refs.txt, this.animateDuration, {
        opacity: 1,
        scrambleText: { ...(this.animateOpt || _opt) }
      })
    },
    //scramble
    animate_Scramble() {
      let txtType = 'upperCase'
      //是中文
      if (/.*[\u4e00-\u9fa5]+.*$/.test(this.text)) txtType = this.text
      //小写
      if (/^[a-z]+$/.test(this.text)) txtType = 'lowerCase'

      let _opt = {
        text: this.text,
        chars: txtType,
        speed: 0.3,
        ease: Linear.easeNone
      }
      return TweenMax.to(this.$refs.txt, this.animateDuration, {
        opacity: 1,
        scrambleText: { ...(this.animateOpt || _opt) }
      })
    },
    //wave
    animate_Wave() {
      let _opt = {
        scale: 4,
        autoAlpha: 0,
        rotationX: -180,
        transformOrigin: '100% 50%',
        ease: Back.easeOut
      }
      return this._wave(this.animateOpt || _opt)
    },
    //waveSmall
    animate_WaveSmall() {
      let _opt = {
        scale: 0,
        autoAlpha: 0,
        rotationX: -180,
        transformOrigin: '100% 50%',
        ease: Back.easeOut
      }
      return this._wave(this.animateOpt || _opt)
    },
    _wave(opt) {
      let splitTextTimeline = new TimelineMax()
      let mySplitText = new SplitText(this.$refs.txt, { type: 'chars' })
      splitTextTimeline.add(TweenMax.to(this.$refs.txt, 0.2, { opacity: 1 }), 0)
      splitTextTimeline.staggerFrom(
        mySplitText.chars,
        this.animateDuration,
        opt,
        0.05
      )
      return splitTextTimeline
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.txt {
  opacity: 0;
  letter-spacing: 2px;
}
</style>
